<template>
  <div id="productDetails">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="top">
        <div>
          <div>
            <!-- <p>{{$t('m.tips15_8')}}</p> -->
            <p>{{$t('m.lc1')}}</p>
            <p>{{product.vcAmount}} VC</p>
          </div>
          <div>
            <!-- <p>{{$t('m.tips15_7')}}</p> -->
            <p>{{$t('m.lc2')}}</p>
            <p>{{product.releaseVcAmount}} VC</p>
          </div>
        </div>
        <p>
          <span>{{wdyFinancial.usdtAmount}} {{product.cnnAmount}}{{$t('m.reservation')}}</span>
          <span>{{$t('m.tips15_5')}}</span>
          <span>{{$t('m.regularProduct')}}</span>
        </p>

        <!-- <div class="detail" v-if="!!flage" > -->
        <div class="detail" v-if="false">
          <h2>{{$t('m.productDetails')}}</h2>
          <p>
            <span>{{$t('m.amount')}}(USDT)</span>
            <span>{{$t('m.purchaseTime')}}</span>
            <span>{{$t('m.status')}}</span>
            <span>{{$t('m.income')}}(USDT)</span>
          </p>
          <!--<p><span>金额(USDT)</span><span>购买时间</span><span>状态</span><span>收益(USDT)</span></p>-->
          <p>
            <span>{{wdyUsdtOrder.usdtAmount}}</span>
            <span>{{wdyUsdtOrder.createTime}}</span>
            <span>{{$t('m.bought')}}</span>
            <span>{{(wdyUsdtOrder.usdtAmount*1.01).toFixed(2)}}</span>
          </p>
        </div>
      </div>
      <div class="content" v-if="false">
        <div>
          <h2>
            {{$t('m.tips15_9')}}
            <span
              :class="net_worth == 1?'active':''"
              @click="netWorth(1)"
            >{{$t('m.tips15_10')}}</span>
            <span :class="net_worth != 1?'active':''" @click="netWorth(2)">{{$t('m.tips15_11')}}</span>
          </h2>
          <div id="myChart"></div>
        </div>
        <div class="introduce">
          <h2>{{$t('m.tips15_12')}}</h2>
          <!--<p>{{$t('m.tips15_13')}}</p>
      		<p>{{$t('m.tips15_14')}}</p>
      		<p>{{$t('m.tips15_15')}}</p>
      		<p>
      			{{$t('m.tips15_16')}}
      			<span>{{$t('m.tips15_17')}}</span>
      			<span>{{$t('m.tips15_18')}}</span>
      			<span>{{$t('m.tips15_19')}}</span>
      		</p>
          <p>{{$t('m.tips15_20')}}</p>-->
          <div v-html="wdyFinancial.goodsDetail"></div>
        </div>
        <div v-if="!flage">
          <a href="javascript:;" @click="appointment(1)">{{$t('m.reservation')}}</a>
        </div>
        <div v-if="!!flage">
          <a
            href="javascript:;"
            :class="wdyUsdtOrder.extraData.closeFlag =='2'?'redemption':''"
            @click="appointment(2)"
          >{{wdyUsdtOrder.extraData.closeFlag =='2'?$t('m.notredeem'):$t('m.redemption')}}</a>
        </div>
      </div>
      <div class="content">
        <div class="tips">
          <p class="title">{{$t('m.lctips')}}</p>
          <p>{{$t('m.lctips1')}}{{product.cnnAmount}},{{$t('m.lctips1_1')}}{{product.vcAmount}} VC;</p>
          <p>{{$t('m.lctips2')}}{{product.releaseVcAmount}} VC;</p>
          <p>{{$t('m.lctips3')}}</p>
          <p>{{$t('m.lctips4')}}</p>
        </div>
        <div class="btn" @click="$router.push(`/reservation?id=1`)">{{$t("m.buy")}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      flage: false,
      net_worth: 2,
      userObj: {},
      dataTime: "",
      wdyUsdtOrder: {},
      wdyFinancial: {},
      product: ""
    };
  },
  created() {
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    // 理财信息
    Services.getProduct({
      id: 1
    }).then(res => {
      if (res.code == "0000") {
        this.product = res.product;
      } else {
        Toast(res.msg);
      }
    });
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
      if (res.code == "0000") {
        this.userObj = res.user;
        localStorage.setItem("userObj", JSON.stringify(this.userObj));
      } else {
        Toast(res.msg);
        localStorage.removeItem("token");
        localStorage.removeItem("userObj");
        sessionStorage.setItem("loginBack", true);
        this.$router.push(`/login`);
      }
    });
    // let category = 0;
    // if (localStorage.getItem("language") == "en_US") {
    //   category = 1;
    // } else {
    //   category = 0;
    // }
    // Services.getWdyUsdtOrder({
    //   token: this.loginToken,
    //   pageNum: 1,
    //   pageSize: 88,
    //   category: category,
    //   lang: localStorage.getItem("language")
    // }).then(res => {
    //   if (res.code == "0000") {
    //     if (res.list.length > 0) {
    //       for (let i = 0; i < res.list.length; i++) {
    //         if (
    //           this.$route.query.id ==
    //           res.list[i].extraData.wdyFinancial.productId
    //         ) {
    //           this.wdyUsdtOrder = res.list[i];
    //           this.flage = true;
    //         }
    //       }
    //     } else {
    //       this.flage = false;
    //     }
    //   }
    // });
    // Services.financialEdit(this.loginToken, {
    //   productId: this.$route.query.id,
    //   category: category,
    //   lang: localStorage.getItem("language")
    // }).then(res => {
    //   if (res.code == "0000") {
    //     this.wdyFinancial = res.wdyFinancial;
    //   }
    // });
    //当前日期
    // const mydate = new Date();
    // let str1 = "" + mydate.getFullYear();
    // let str2 = mydate.getMonth() + 1;
    // let str3 = mydate.getDate();
    // str2 = str2 < 10 ? "0" + str2 : str2;
    // str3 = str3 < 10 ? "0" + str3 : str3;
    // this.dataTime = str1 + "-" + str2 + "-" + str3;
    this.changeTitle(this.$t("m.productDetails"));
  },
  components: { Header },
  computed: {},
  mounted() {
    // this.drawLine([0.91, 1.05, 1.0, 0.89]);
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    netWorth(id) {
      if (id == 1) {
        //近6个月
        this.net_worth = 1;
        this.drawLine([
          1.0,
          0.98,
          1.07,
          1.06,
          0.98,
          1.0,
          1.08,
          0.99,
          1.05,
          1.02,
          1.06,
          0.99
        ]);
      } else {
        //近一年
        this.net_worth = 2;
        this.drawLine([0.91, 1.05, 1.0, 0.89]);
      }
    },
    drawLine(data) {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      let option = {
        //          title: { text: '在Vue中使用echarts' },
        //          tooltip: {},

        textStyle: {
          color: "#c0c1c4"
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "#912CEE"
            }
          },
          axisLabel: {
            rotate: 40, // 旋转角度
            fontSize: "10",
            interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
          },
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: "#912CEE"
            }
          },
          axisLabel: {
            fontSize: "12"
          }
        },
        series: [
          {
            data: data,
            type: "line",
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label: {
                  show: true
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    //预约、赎回
    appointment(id) {
      if (id == 1) {
        this.$router.push(`/reservation?id=${this.$route.query.id}`);
      } else {
        if (this.wdyUsdtOrder.extraData.closeFlag == "2") {
        } else {
          this.$router.push(`/redemption`);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#productDetails {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow-y: scroll;
    .top {
      padding: 0.5rem 0.3rem 0;
      min-height: 3.2rem;
      box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
      > div {
        display: flex;
        margin-bottom: 0.4rem;
        div {
          flex: 1;
          p {
            text-align: center;
            &:nth-of-type(2) {
              font-size: 0.4rem;
              padding-top: 0.2rem;
              font-weight: 700;
              color: #fd6262;
            }
          }
        }
        &.detail {
          display: block;
          padding-top: 0.4rem;
          margin-bottom: 0.1rem;
          p {
            display: flex;
            span {
              flex: 1;
              display: flex;
              justify-content: center;
              padding-bottom: 0.1rem;
              &:nth-last-child {
                padding: 0;
              }
            }
          }
        }
      }
      > p {
        display: flex;
        justify-content: space-between;
        span {
          width: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 0.02rem solid #fff;
          padding: 0.06rem 0;
          border-radius: 0.08rem;
          font-size: 0.24rem;
        }
      }
    }

    h2 {
      font-size: 0.36rem;
      color: #c0c1c4;
      margin-bottom: 0.2rem;
      span {
        border: 0.02rem solid #fff;
        padding: 0.06rem 0.16rem;
        border-radius: 0.08rem;
        font-size: 0.24rem;
        color: #fff;
        margin: 0 0.1rem;
        &.active {
          background: #912cee;
        }
      }
    }
    .content {
      // color: #fff;
      // background: #434551;
      min-height: calc(100% - 3.4rem);
      /*height: 100%;*/
      padding: 0.2rem 0.3rem 0;
      .tips {
        font-size: 0.26rem;
        margin-bottom: 0.1rem;
        .title {
          margin-bottom: 0.2rem;
          font-size: 0.3rem;
        }
      }
      .btn {
        margin-top: 2rem;
        width: 100%;
        background: linear-gradient(to right, #43434e, #727181);
      }
      // div {
      //   margin-bottom: 0.1rem;
      //   #myChart {
      //     width: 100%;
      //     height: 7rem;
      //   }
      //   > a {
      //     display: inline-block;
      //     margin: 0 auto 0.4rem auto;
      //     margin-top: 0.3rem;
      //     width: 6.6rem;
      //     height: 0.85rem;
      //     line-height: 0.85rem;
      //     font-size: 0.32rem;
      //     letter-spacing: 0.05rem;
      //     text-align: center;
      //     border-radius: 0.1rem;
      //     color: #fff;
      //     background: #912cee;
      //     &.redemption {
      //       background: #30323e;
      //     }
      //   }
      // }
      // .introduce {
      //   div >>> p {
      //     color: #fff;
      //     padding-bottom: 0.1rem;
      //     font-size: 0.24rem;
      //     /*span {
      //       display: block;
      //       margin-bottom: 0.1rem;
      //       text-indent: 0.48rem;
      //     }*/
      //   }
      // }
    }
  }
}
</style>